<!-- 报价 -->
<template>
	<view>
		<!-- 顶部tab导航栏 -->
		<scroll-view scroll-x class="bg-white nav text-center">
			<view class="flex text-center">
				<view class="cu-item flex-sub item" :class="index==TabCur?'active':''" v-for="(item,index) in tabNav" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{tabNav[index]}}
				</view>
			</view>
		</scroll-view>


		<block v-if="TabCur<2">
			<view>
				<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
				 :scroll-with-animation="true" :enable-back-to-top="true">
					<block v-for="(item,index) in list" :key="index">
						<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
							<view class="padding">{{item.name}}</view>
							<view class="cu-list menu-avatar no-padding">
								<view class="cu-item" @click="toQuoteCategory(brand)" v-for="(brand,sub) in item.brands" :key="sub">
									<view class="cu-avatar round lg" style="background-color: #00000000;">
										<image style="width:100%;height:100%;" :src="brand.logo_image"></image>
									</view>
									<view class="content">
										<view class="text-grey left text-center">{{brand.brand_name}}</view>
										<view class="text-gray right fr cuIcon-right text-sm" style="margin-top: -50upx;margin-right: -50upx;">
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
				<view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px - 50px)'}]">
					<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
						<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur">
							{{item.name}}</view>
					</view>
				</view>
				<!--选择显示-->
				<view v-show="!hidden" class="indexToast">
					{{listCur}}
				</view>
			</view>
		</block>
		<block v-if="TabCur==2">
			<view class="">
				<block v-for="(item,index) in superList" :key="item.id">
					<view class="cu-list menu-avatar no-padding radius shadow bg-white margin-lg">
						<view @click="toQuoteDetail(item.id)" class="cu-item">
							<view class="content">
								<view class="text-grey left fl text-center" style="margin-left: -100upx;">{{item.name}}</view>
								<view class="text-gray right fr cuIcon-right text-sm" style="margin-right: -100upx;">
								</view>
							</view>
						</view>
					</view>
				</block>
				<!-- <view>
					<u-cell-group>
						<u-cell-item @click="toQuoteDetail()" v-for="(item,index) in superList" :key="item.id" icon="rmb-circle" :title="item.name"></u-cell-item>
					</u-cell-group>
				</view> -->
			</view>
		</block>


		<!-- 底部导航 -->
		<u-tabbar v-model="nav_current" :list="nav_list"  height="100"></u-tabbar>
	</view>
</template>

<script>
	// import {carBrands} from '../../common/carBrands.js';
	
	export default {		
		data() {
			return {
				nav_list: [{
						pagePath: "/pages/index/index",
						iconPath: "/static/death/nav/home.png",
						selectedIconPath: "/static/death/home-selected.png",
						text: '首页'
					},
					{
						pagePath: "/pages/car/case",
						iconPath: "/static/death/nav/case.png",
						selectedIconPath: "/static/death/nav/case-selected.png",
						text: '案例'
					},
					{
						pagePath: "/pages/car/quote",
						iconPath: "/static/death/nav/price.png",
						selectedIconPath: "/static/death/nav/price-selected.png",
						text: '报价'
					},
					{
						pagePath: "/pages/product/product",
						iconPath: "/static/death/nav/brand.png",
						selectedIconPath: "/static/death/nav/brand-selected.png",
						text: '品牌'
					},
					{
						pagePath: "/pages/my/my",
						iconPath: "/static/death/nav/mine.png",
						selectedIconPath: "/static/death/nav/mine-selected.png",
						text: '我的'
					},
				], // 底部导航
				nav_current: 2,
				TabCur: 0,
				// tabNav: ['漆面膜', '内饰', '改色', '窗膜'],
				tabNav: ['漆面膜', '改色', '窗膜'],
				// carList: [{
				// 	id: 1,
				// 	modalName: '', //车膜类型
				// 	start: 'A', //车名首字母
				// 	imgUrl: '', //车图片
				// 	name: '奥迪', //车名
				// }, {
				// 	id: 2,
				// 	modalName: '', //车膜类型
				// 	start: 'B', //车名首字母
				// 	imgUrl: '', //车图片
				// 	name: '比亚迪', //车名
				// }, {
				// 	id: 3,
				// 	modalName: '', //车膜类型
				// 	start: 'D', //车名首字母
				// 	imgUrl: '', //车图片
				// 	name: '大众', //车名
				// }],
				superList: [{
					id: 0,
					modalName: '', //车膜类型
					imgUrl: '', //车图片
					name: '五座轿车或SUV', //车名
				}, {
					id: 1,
					modalName: '', //车膜类型
					imgUrl: '', //车图片
					name: '六座及以上SUV或MPV', //车名
				}],
				current: 0,
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				hidden: true,
				listCurID: '',
				list: [],
				listCur: '',
				canBrands: []
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		async onLoad() {
			let res = await this.$api.getBrands();
			this.list = res.data;
			this.listCur = res.data[0];
		},
		onReady() {
			let that = this;
			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				that.boxTop = res.top
			}).exec();
			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				that.barTop = res.top
			}).exec()
		},
		methods: {
			//tab切换
			tabSelect(e) {
				this.TabCur = parseInt(e.currentTarget.dataset.id);
			},
			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id].name;
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					this.listCur = that.list[num].name
				};
			},

			//触发全部开始选择
			tStart() {
				this.hidden = false
			},

			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.listCurID = this.listCur
			},
			indexSelect(e) {
				let that = this;
				let barHeight = this.barHeight;
				let list = this.list;
				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
				for (let i = 0; i < list.length; i++) {
					if (scrollY < i + 1) {
						that.listCur = list[i].name;
						that.movableY = i * 20
						return false
					}
				}
			},
			toQuoteDetail(e) {
				this.current = e;
				uni.navigateTo({
					url: '/pages/car/detail?current=' + this.current
				})
			},
			toQuoteCategory(brand) {
				uni.navigateTo({
					url: '/pages/car/category?brand=' + brand.brand_name + '&tab=' + this.TabCur + '&img=' + brand.car_image 
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f1f1f1;
	}
</style>
<style lang="scss" scoped>
	.indexes {
		position: relative;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
	
	.item{
		color: #000000;
		border: none;
	}
	.active{
		border-bottom: 7rpx solid #FBCB11;
		font-weight: bold;
	}
</style>
